import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import type { FC, CSSProperties } from 'react';
import ControlPointIcon from '@material-ui/icons/ControlPoint';
import HighlightOff from '@material-ui/icons/HighlightOff';
import { Box } from '@material-ui/core';
import { ChromePicker } from 'react-color';
import type { SketchPickerProps } from 'react-color/lib/components/sketch/Sketch';

const styles: Record<string, CSSProperties> = {
  popover: {
    position: 'relative',
    zIndex: 2,
  },
  cover: {
    position: 'fixed',
    top: '0px',
    right: '0px',
    bottom: '0px',
    left: '0px',
  },
};

const PlusColorPicker: FC<{
  onChange?: (color: string) => void;
  handlerVisible?: (visible: boolean) => void;
}> = ({ onChange, handlerVisible }) => {
  const [visible, setVisible] = useState(false);
  const [color, setColor] = useState('');
  const onClose = () => {
    setVisible(false);
    if (onChange) onChange(color);
    if (handlerVisible) handlerVisible(false);
  };
  const onShow = () => {
    setVisible(true);
    if (handlerVisible) handlerVisible(true);
  };

  return (
    <>
      {!visible ? <ControlPointIcon color={'action'} onClick={onShow} /> : null}
      {visible ? (
        <div style={styles.popover}>
          <div style={styles.cover} onClick={onClose} />
          <ChromePicker
            color={color}
            onChange={(c) => {
              setColor(c.hex);
            }}
          />
        </div>
      ) : null}
    </>
  );
};

const SketchPickerCus = forwardRef<
  {
    setColors: (colors: string[]) => void;
  },
  { colors: string[]; onChange: (colors: string[]) => null }
>((props, ref) => {
  const [colors, setColors] = useState<string[]>(props.colors || []);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    setColors(props.colors || []);
  }, [setColors, props]);
  useImperativeHandle(ref, () => ({ setColors }));

  const circleStyle: Record<string, CSSProperties> = {
    color: {
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      background: colors.length < 2 ? colors[0] || 'unset' : `linear-gradient(${colors.join(',')})`,
    },
    swatch: {
      padding: 1,
      background: '#fff',
      borderRadius: '50%',
      boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
      display: 'inline-block',
      cursor: 'pointer',
      width: 20,
      height: 20,
      border: '1px solid #e8e8e8',
    },
  };

  return (
    <>
      {!visible ? (
        <>
          <HighlightOff
            color={'action'}
            onClick={() =>
              setColors((preColor) => {
                preColor.pop();
                props.onChange(preColor);
                return [...preColor];
              })
            }
          />
          <Box mr={1} />
          <div style={circleStyle.swatch}>
            <div style={circleStyle.color} />
          </div>
          <Box mr={1} />
        </>
      ) : null}
      <PlusColorPicker
        handlerVisible={setVisible}
        onChange={(color) => {
          setColors((preColor) => {
            const newColor = [...preColor];
            newColor.push(color);
            props.onChange(newColor);
            return newColor;
          });
        }}
      />
    </>
  );
});

export default SketchPickerCus;
